<template>
  <div class="comming">
    <h1>This is html</h1>

    <div class="progress-box">
      <!-- <audio :src="songUrl" controls></audio> -->
      <button @click="playIt">开始播放</button>
      <button @click="pauseIt">暂停播放</button>
      <!-- 自定义进度条
              更新(修改)进度事件 changeProgess
              传入的进度 value
      -->
      <PlayProgress @changeProgess="change" :value="playing"></PlayProgress>
    </div>
  </div>
</template>


// <script>
// import PlayProgress from '../components/PlayProgress'
// export default {
//   created(){
//     let url = 'https://music.163.com/song/media/outer/url?id=347230.mp3'
//     this.player = new Audio();
//     this.player.src = url;
//     this.player.addEventListener('timeupdata',()=>{
//       this.currentTime = this.player.duration
//     })

//     this.songUrl = url;
//     },
//   data(){
//     return{
//       songUrl:'',
//       player:{},
//       duration:0
//     }
//   },
//   computed:{
//     playing(){  //播放进度百分比
//       return this.playing.currentTime /this.player.duration;
//     }
//   },
//   methods:{
//     //开始播放
//     playIt(){
//       this.player.play();
//     },
//     //暂停播放
//     pauseIt(){
//       this.player.pause();
//     },
//     change(precent){
//       //时长duration 当前时间currentTime
//       this.player.currentTime = precebt * this.player.duration;
//       console.log(this.player.currentTime);
//     }
//   },
//     components:{
//       PlayProgress
//     }
// }
//
</script>

// <style lang="scss" scoped>
// .comming{
//   background: #1f1f1f;
//   .progress-box{
//     width: 80%;
//     margin:0 auto;
//   }
// }
//
</style>
